<template>
  <div v-if="show" class="comfirm-box">
    <div class="box-wraper">
      <div class="content">
        <div class="body">
          <slot name="body"> 是否拨打 {{ phone }} </slot>
        </div>
        <div class="footer">
          <slot name="footer">
            <div class="left" @click="$emit('cancel')">
              取消
            </div>
            <div class="right">
              <a v-if="showTel == true" @click="callPhone">拨打</a>
              <a v-if="showTel == false" ref="phoneDom" :href="phoneString" style="display:hidden">拨打</a>
            </div>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['show', 'phone'], // eslint-disable-line
  data() {
    return {
      showTel: false
    }
  },
  computed: {
    phoneString() {
      return 'tel:' + this.phone
    }
  },
  mounted() {
    if (this.commonJs.checkTerminal() == 'ios') {
      this.showTel = true
    } else if (this.commonJs.checkTerminal() == 'android') {
      this.showTel = true
    } else {
      this.showTel = false
    }
  },
  methods: {
    callPhone() {
      if (this.commonJs.checkTerminal() == 'ios') {
        window.webkit.messageHandlers.CallTelephone.postMessage(this.phone)
      } else if (this.commonJs.checkTerminal() == 'android') {
        ZMParentsJsToAndroid.CallTelephone(this.phone)
        setTimeout(() => {
          this.blurAdjust()
        }, 50)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.comfirm-box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 8000;

  .box-wraper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;

    .content {
      width: 5.4rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.1rem;
      margin-top: -4rem;
      .body {
        margin: 0.75rem 0.32rem 0.45rem 0.32rem;
        text-align: center;
        font-size: 0.3rem;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 0.4rem;
      }

      .footer {
        border-top: 0.01rem solid rgba(221, 221, 221, 1);
        display: flex;
        font-size: 0.36rem;

        .left {
          flex: 1;
          width: 50%;
          text-align: center;
          padding: 0.24rem 0;
          border-right: 1px solid rgba(221, 221, 221, 1);
          color: #999999;
        }

        .right {
          flex: 1;
          padding: 0.24rem 0;
          width: 50%;
          text-align: center;

          a {
            text-decoration: none;
            color: @mainColor;
          }
        }
      }
    }
  }
}
</style>
